{% extends "front/base.html" %}

{% block title %}
    首页-Python论坛
{% endblock %}

{% block head %}
{% endblock %}

{% block body %}
    <div class="main-content">
        <div class="carousel slide index-banner" data-ride="carousel" id="carousel-example-generic">
                <!-- 指示器 -->
                <ol class="carousel-indicators">
                    {% for banner in banners %}
                        {% if loop.first %}
                            <li data-target="#carousel-example-generic" data-slide-to="{{ loop.index0 }}"
                                class="active"></li>
                        {% else %}
                            <li data-target="#carousel-example-generic" data-slide-to="{{ loop.index0 }}"></li>
                        {% endif %}
                    {% endfor %}
                </ol>
                <!-- 轮播图 -->
                <div class="carousel-inner" role="listbox">
                    {% for banner in banners %}
                        {% if loop.first %}
                            <div class="item active">
                        {% else %}
                            <div class="item">
                        {% endif %}
                    <a href="{{ banner.link_url }}" target="_blank">
                        <img alt="{{ banner.name }}" src="{{ banner.image_url }}">
                    </a>
                    </div>
                    {% endfor %}
                    </div>
                    <!-- 左右切换的控制按钮 -->
                    <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic" role="button">
                        <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" data-slide="next" href="#carousel-example-generic" role="button">
                        <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            
        <div class="banner-sidebar">
                <div class="post-btn-container">
                    <a class="btn btn-warning btn-block" href="{{ url_for('front.public_post') }}">发布帖子</a>
                </div>
                <div class="board-list-container">
                    <h4 class="board-section-title">所有板块</h4>
                    <div class="board-cards">
                        <div class="board-card {% if not board_id %}active{% endif %}">
                            <a href="/">
                                <div class="board-card-icon">
                                    <i class="fas fa-th-large"></i>
                                </div>
                                <div class="board-card-content">
                                    <h5>所有板块</h5>
                                    <p>浏览全部内容</p>
                                </div>
                            </a>
                        </div>
                        {% for board in boards %}
                        <div class="board-card {% if board_id==board.id %}active{% endif %}">
                            <a href="{{ url_for('front.index',board_id=board.id,page=1 ) }}">
                                <div class="board-card-icon">
                                    {% if board.name == 'Python' %}
                                    <i class="fab fa-python"></i>
                                    {% elif board.name == 'Flask' %}
                                    <i class="fas fa-flask"></i>
                                    {% elif board.name == 'Django' %}
                                    <i class="fas fa-cubes"></i>
                                    {% elif board.name == '爬虫' %}
                                    <i class="fas fa-spider"></i>
                                    {% elif board.name == '前端' %}
                                    <i class="fas fa-code"></i>
                                    {% else %}
                                    <i class="fas fa-bookmark"></i>
                                    {% endif %}
                                </div>
                                <div class="board-card-content">
                                    <h5>{{ board.name }}</h5>
                                    <p>主题: {{ board.posts|length }}</p>
                                </div>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        <div class="lg-container">
            <div class="post-group">
                <ul class="post-group-head">
                    {% if sort==1 %}
                        <li class="active">
                            {% else %}
                        <li>
                    {% endif %}
                    <a href="{{ url_for('front.index',sort=1,board_id=board_id) }}">最新</a>
                    </li>
                    <!--            <li><a href="#">点赞最多</a></li>-->
                    {% if sort==2 %}
                        <li class="active">
                            {% else %}
                        <li>
                    {% endif %}
                    <a href="{{ url_for('front.index',sort=2,board_id=board_id) }}">评论最多</a>
                    </li>
                </ul>
                <div class="post-cards">
                    {% for post in posts %}
                        <div class="post-card">
                            <div class="post-card-header">
                                <div class="author-info">
                                    <div class="author-avatar">
                                        {% if post.author.avatar and post.author.avatar.strip() %}
                                            <img alt="{{ post.author.username }}" src="{{ url_for('media.get_avatar',filename=post.author.avatar) }}">
                                        {% else %}
                                            <img alt="{{ post.author.username }}" src="{{ url_for('static',filename='front/images/avatar.jpg') }}">
                                        {% endif %}
                                    </div>
                                    <div class="author-name">
                                        <span>{{ post.author.username }}</span>
                                        <small>{{ post.created_time }}</small>
                                    </div>
                                </div>
                                {% if post.board %}
                                <div class="post-board-tag">
                                    <span>{{ post.board.name }}</span>
                                </div>
                                {% endif %}
                            </div>
                            <div class="post-card-content">
                                <h3 class="post-title">
                                    <a href="{{ url_for('front.post_detail',post_id=post.id ) }}">{{ post.title }}</a>
                                </h3>
                                <div class="post-summary">
                                    {% if post.content %}
                                    <p>{{ post.content|striptags|truncate(100) }}</p>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="post-card-footer">
                                <div class="post-stats">
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>{{ post.comments|length }}</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>{{ post.read_count|default(0) }}</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-clock"></i>
                                        <span>{{ post.created_time }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <div style="text-align: center;">{{ pagination.links }}</div>
            </div>
        </div>
    </div>
{% endblock %}